<template>
  <div>
    <el-form
      label-width="90px"
      class="user-form"
      :model="form"
      ref="form"
      :rules="formRules"
      size="small"
    >
      <el-form-item label prop="headImg" class="headImg">
        <zm-image-upload v-model="form.headImg" :limit="1" @change="imgChange"></zm-image-upload>
      </el-form-item>
      <el-form-item label="用户名:" prop="userName">
        <span class="rem400 vm ta">{{ form.userName }}</span>
      </el-form-item>
      <el-form-item label="姓名:" prop="realName">
        <el-input
          ref="realName"
          v-model="form.realName"
          @blur="onEdit('realName')"
          v-if="realNameEdit"
        ></el-input>
        <div v-else>
          <span class="rem400 vm ta">{{ form.realName }}</span>
          <i
            class="el-icon-edit text-primary fs20"
            @click="showEdit('realName')"
          />
        </div>
      </el-form-item>
      <el-form-item label="手机号:" prop="mobile">
        <el-input
          ref="mobile"
          v-model="form.mobile"
          @blur="onEdit('mobile')"
          v-if="mobileEdit"
        ></el-input>
        <div v-else>
          <span class="rem400 vm ta">{{ form.mobile }}</span>
          <i
            class="el-icon-edit text-primary fs20"
            @click="showEdit('mobile')"
          />
        </div>
      </el-form-item>
      <el-form-item label="密码:" prop="password">
        <span class="rem400 vm ta">{{ form.password }}</span>
        <i class="el-icon-edit text-primary fs20" @click="pswChange" />
      </el-form-item>
      <el-form-item label="邮箱:" prop="email">
        <el-input
          ref="email"
          v-model="form.email"
          @blur="onEdit('email')"
          v-if="emailEdit"
        ></el-input>
        <div v-else>
          <span class="rem400 vm ta">{{ form.email || "暂无数据" }}</span>
          <i
            class="el-icon-edit text-primary fs20"
            @click="showEdit('email')"
          />
        </div>
      </el-form-item>
      <!-- <el-form-item>
      <el-button type="primary" @click="submit" class="wp100">确定</el-button>
    </el-form-item> -->
    </el-form>
    <update-pwd
      v-if="pwdParams.visible"
      v-model="pwdParams.visible"
      :id="pwdParams.id"
    ></update-pwd>
  </div>
</template>

<script>
import defaultAvatar from '@/assets/default-logo.jpg'
import { mapGetters, mapActions } from 'vuex'
import { standerPhone, standEmail } from '@/utils/validateRule'
import ZmImageUpload from '@/components/ZmUpload/components/ImageUpload'
import { updateShelf } from '@/api/src/systemAccount'
import { upload } from '@/api/src/upload'
import UpdatePwd from './UpdatePsw'

export default {
  components: { ZmImageUpload, UpdatePwd },
  data () {
    return {
      form: {
        userName: '',
        realName: '',
        mobile: '',
        password: '******',
        email: ''
      },
      realNameEdit: false,
      mobileEdit: false,
      passwordEdit: false,
      emailEdit: false,
      pwdParams: {
        visible: false,
        id: ''
      },
      headImgOld: '',
      formRules: {
        userName: [{ required: true, message: '请输入用户名' }],
        realName: [{ required: true, message: '请输入姓名' }],
        mobile: [
          { required: true, message: '请输入手机号' },
          { validator: standerPhone }
        ],
        password: [{ required: true, message: '请输入密码' }],
        email: [{ validator: standEmail }],
        headImg: [{ required: true, message: '请上传头像' }]
      }
    }
  },
  computed: {
    ...mapGetters(['name', 'userName', 'email', 'headImg', 'userInfo']),
    bankForm () {
      return { ...this.userInfo }
    }
  },
  created () {
    this.getInfo()
  },

  methods: {
    ...mapActions(['GetInfo']),
    fetch (e) {
      return upload(e)
    },
    async getInfo () {
      this.form = await this.GetInfo()
      this.form = Object.assign(
        { ...this.form },
        {
          id: this.userInfo.userId,
          // realName: this.realName,
          userName: this.userName,
          password: this.password || '******',
          headImg: this.headImg || defaultAvatar
        }
      )

      this.headImgOld = JSON.stringify(this.form.headImg)
    },
    async imgChange (val) {
      console.log(this.headImgOld, this.form.headImg, val, 'hgghghghhg')
      if (this.form.headImg && this.headImgOld !== this.form.headImg) {
        const form = { id: this.userInfo.userId }
        form.headImg = this.form.headImg
        await updateShelf(Object.assign({}, form))
        await this.GetInfo()
        this.$message.success('修改成功')
      }
    },
    async onEdit (type) {
      const bool = type + 'Edit'
      var reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
      if (type === 'email' && this.form.email !== '' && !reg.test(this.form.email)) {
        return
      }
      var points = /^1[3456789]\d{9}$/
      if (type === 'mobile' && this.form.mobile !== '' && !points.test(this.form.mobile)) {
        return
      }
      if (!this.form[type]) {
        this.$message.warning('请填写完整')
        return
      }
      this[bool] = !this[bool]
      const form = { id: this.userInfo.userId }
      form[type] = this.form[type]
      await updateShelf(Object.assign({}, form))
      await this.GetInfo()
      this.$message.success('修改成功')
    },
    pswChange () {
      this.pwdParams = {
        visible: true,
        id: this.userInfo.userId
      }
    },
    showEdit (type) {
      this[type + 'Edit'] = !this[type + 'Edit']
      this.$nextTick(() => {
        this.$refs[type].focus()
      })
    },
    async submit () {
      // let _valid = false
      // this.$refs.form.validate(valid => {
      //   _valid = valid
      // })
      // if (!_valid) return
      // await update(
      //   Object.assign({}, this.form)
      // )
      // await this.GetInfo()
      // this.$msg.operationSuccess()
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~styles/variables";
.headImg {
  .upload-hide-add {
    position: relative;
    left: 50%;
    margin-left: -25%;
  }
}
.rem400 {
  width: rem(400px)
}
.ta {
  text-align: center;
}
</style>
